<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            div块元素的宽度是浏览器的宽度
            span行元素的宽度是内容的宽度
            max-width 设置元素的最大宽度
            auto(自动) 宽度就是浏览器的宽度
            单位可以是px,em,rem, %(基于父元素宽度的百分比)

            当元素宽度没有达到浏览器宽度时 会出现空白
            当元素宽度超过浏览器宽度时 宽度会变成浏览器的宽度
        */
        div, span {
            border: 1px solid red;
            max-width: auto;
            max-width: 500px;
        }
    </style>
</head>
<body>
    <div>
        内容内容内容内容内容
    </div>
    <span>内容内容内容内容内容</span>
</body>
</html>